@charset "utf-8";
$font-size: 40;
@function r($px) {
  @return $px/(2*$font-size) * 1rem;
}

section {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

article {
  width: r(352);
  margin: r(119) auto 0;
  .logo {
    width: r(239);
    height: r(213);
    margin-left: r(54);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .website {
    font-size: r(15);
    margin: r(20) auto 0;
    text-align: center;
  }
  input {
    width: 100%;
    border-radius: 5px;
    height: r(51);
  }
  ::-webkit-input-placeholder {
    font-size: r(18);
  }
  #id {
    margin-top: r(46);
    border: 1px solid #a8a9a8;
    text-indent: r(10);
  }
  #password {
    margin-top: r(36);
    text-indent: r(10);
    border: 1px solid #a8a9a8;
  }
  #login_btn {
    background: rgb(51, 51, 51);
    text-align: center;
    color: white;
    margin-top: r(36);
    margin-bottom: r(14);
    font-size: r(18);
  }
  a {
    font-size: r(20);
    color: #878787;
  }
  a:nth-of-type(1) {
    float: left;
    text-decoration: underline;
  }
  a:nth-of-type(2) {
    float: right;
    text-decoration: underline;
  }
  .bind_way {
    height: r(82);
    width: r(350);
    margin: r(114) auto 0;
    .bind_item {
      width: r(98);
      height: 100%;
      div {
        margin: 0 auto;
        width: r(48);
        height: r(48);
        img {
          width: 100%;
          height: 100%;
          vertical-align: top;
        }
      }
      p {
        margin-top: r(8);
        a{
          font-size: r(21);
          color: #878787;
          text-decoration: none;
          text-align: center;
        }
      }
    }
    .bind_item:nth-of-type(3){
      margin: 0 auto;
    }
  }
}
